<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div class="top-goods">
      <van-skeleton
        title
        avatar
        :row="3"
        avatar-shape="square"
        avatar-size="40px"
        :loading="this.loading"
      />
      <div class="top-item-img">
        <img :src="this.items.picUrl" alt />
      </div>
      <div class="top-item-container">
        <p>
          <b>{{this.items.shopName}}</b>
        </p>
      </div>
    </div>
    <div class="goods-box">
      <div class="nav-goods">
        <van-skeleton title :row="1" :loading="this.loading" />
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="(item,index) in shops"
            :key="index"
            :title="item.categoryName"
            @click="titleClick"
          />
        </van-sidebar>
      </div>
      <div>
        <van-skeleton title :row="3" :loading="this.loading" />
        <van-skeleton title :row="3" :loading="this.loading" />
        <van-skeleton title :row="3" :loading="this.loading" />
        <van-card
          v-for="(item,index) in goods"
          :key="index"
          :price="item.currentPrice"
          desc="描述信息"
          :title="item.spuName"
          :thumb="item.bigImageUrl"
        >
          <template #num>
            <van-stepper
              theme="round"
              button-size="22"
              v-model="item.sellStatus"
              min="0"
              :show-minus="item.sellStatus>0 ? true :false"
              @change="numChange(item)"
              disable-input
            />
          </template>
        </van-card>
      </div>
    </div>
    <van-popup v-model="isshow" position="bottom" :style="{ height: '30%' }">
      <div class="goodsCars">
        <span>购物车</span>
        <span>
          清空购物车
          <van-icon name="delete" />
        </span>
      </div>
    </van-popup>
    <div class="bottem">
      <van-goods-action>
        <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
        <span>总计：{{allCount}}</span>
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      loading: true,
      shopList: [],
      shops: [],
      items: "",
      activeKey: 0,
      goods: [],
      isshow: false,
      isactive: false,
      allCount: 0,
      goodsCars: [],
    };
  },
  // created(){
  //   var goodsCars = localStorage.goodsCars

  // },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    titleClick() {
      console.log(111);
    },
    numChange(item) {
      this.allCount = 0;
      this.goods.map((res) => {
        // console.log(res.sellStatus)
        this.allCount += res.currentPrice * res.sellStatus;
      });
      // this.goodsCars.push(item)
      console.log(item);
      console.log(item.spuId);
      let flag = true;
      this.goodsCars.map((it) => {
        console.log(it.spuId);
        // console.log(item.spuId)

        if (it.spuId == item.spuId) {
          flag = false;
          it.sellStatus++;
        }
      });
      if (flag) {
        this.goodsCars.push(item);
      }
      // if(this.goodsCars.includes(item)){
      //   return
      // }
      console.log(this.goodsCars);
    },
    onClickIcon() {
      this.isshow = true;
    },
    // save(){
    //   this.goodsCars = JSON.stringify(this.goodsCars)
    // }
  },
  created() {
    this.items = this.$route.query.item;
    //    console.log(item)
    let id = this.items.mtWmPoiId;
    axios
      .get("http://localhost:8080/shopdetails.json", {
        params: {
          id,
        },
      })
      .then((res) => {
        let list = res.data;
        list.map((it) => {
          if (it.data.mtWmPoiId == id) {
            this.shopList = it.data.categoryList;
            //   console.log(this.shopList)
            this.shopList.map((el) => {
              //   console.log(el.categoryName);
              this.shops.push(el);
              //   console.log(this.shops[0].spuList)
              this.goods = this.shops[0].spuList;
              // console.log(this.goods);
            });
          }
        });
      });
    this.loading = false;
  },
};
</script>

<style scoped>
.top-goods {
  width: 100%;
  height: 120px;
  background: #1a191e;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.top-item-img {
  width: 30%;
  /* height: 100%; */
}
.top-item-img img {
  width: 100%;
  margin-left: 10px;
  margin-top: 10px;
}
.top-item-container {
  color: #fff;
}
.goods-box {
  width: 100%;
  display: flex;
}
.goodsCars {
  width: 100%;
  padding: 5px;
  height: 30px;
  background: rgb(232, 232, 232);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>